<template>
    <q-layout view="lHh Lpr lff">
        <q-header elevated class="glossy">
            <q-toolbar>
                <q-btn
                    flat
                    dense
                    round
                    @click="leftDrawerOpen = !leftDrawerOpen"
                    aria-label="Menu"
                    icon="menu"
                />

                <q-toolbar-title>Quasar App</q-toolbar-title>

                <div>Quasar v{{ $q.version }}</div>

                <q-btn
                    :color="$q.dark.isActive ? 'white' : 'black'"
                    :label="$q.dark.isActive ? '亮色主题' : '深色主题'"
                    :text-color="$q.dark.isActive ? 'black' : 'white'"
                    glossy
                    @click="$q.dark.toggle()"
                />
            </q-toolbar>
        </q-header>

        <q-drawer v-model="leftDrawerOpen" show-if-above :width="260" :breakpoint="500" bordered>
            <q-scroll-area class="fit">
                <q-list padding>
                    <q-item clickable v-ripple :to="{ name: 'Home' }">
                        <q-item-section avatar>
                            <q-icon name="inbox" />
                        </q-item-section>

                        <q-item-section>home</q-item-section>
                    </q-item>

                    <q-separator />

                    <q-expansion-item
                        expand-separator
                        icon="perm_identity"
                        label="Account settings"
                        caption="John Doe"
                        :header-inset-level="0"
                        :content-inset-level="1"
                    >
                        <q-card>
                            <q-item clickable v-ripple :to="{ name: 'Home' }">
                                <q-item-section avatar>
                                    <q-icon name="inbox" />
                                </q-item-section>

                                <q-item-section>home</q-item-section>
                            </q-item>

                            <q-item active clickable v-ripple :to="{ name: 'About' }">
                                <q-item-section avatar>
                                    <q-icon name="star" />
                                </q-item-section>

                                <q-item-section>about</q-item-section>
                            </q-item>
                        </q-card>
                    </q-expansion-item>

                    <q-separator />

                    <q-expansion-item
                        expand-separator
                        icon="signal_wifi_off"
                        label="Wifi settings"
                        :header-inset-level="0"
                        :content-inset-level="1"
                    >
                        <q-item clickable v-ripple :to="{ name: 'Home' }">
                            <q-item-section avatar>
                                <q-icon name="inbox" />
                            </q-item-section>

                            <q-item-section>home</q-item-section>
                        </q-item>

                        <q-item active clickable v-ripple :to="{ name: 'About' }">
                            <q-item-section avatar>
                                <q-icon name="star" />
                            </q-item-section>

                            <q-item-section>about</q-item-section>
                        </q-item>
                    </q-expansion-item>

                    <q-separator />

                    <q-expansion-item
                        expand-separator
                        icon="drafts"
                        label="Drafts"
                        header-class="text-purple"
                    >
                        <q-card>
                            <q-card-section>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                                commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                                eveniet doloribus ullam aliquid.
                            </q-card-section>
                        </q-card>
                    </q-expansion-item>

                    <q-expansion-item icon="assessment" label="Disabled" disable>
                        <q-card>
                            <q-card-section>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                                commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                                eveniet doloribus ullam aliquid.
                            </q-card-section>
                        </q-card>
                    </q-expansion-item>

                    <q-item clickable v-ripple :to="{ name: 'Home' }">
                        <q-item-section avatar>
                            <q-icon name="inbox" />
                        </q-item-section>

                        <q-item-section>home</q-item-section>
                    </q-item>

                    <q-item active clickable v-ripple :to="{ name: 'About' }">
                        <q-item-section avatar>
                            <q-icon name="star" />
                        </q-item-section>

                        <q-item-section>about</q-item-section>
                    </q-item>

                    <q-item clickable v-ripple>
                        <q-item-section avatar>
                            <q-icon name="send" />
                        </q-item-section>

                        <q-item-section>Send</q-item-section>
                    </q-item>

                    <q-separator />

                    <q-item clickable v-ripple>
                        <q-item-section avatar>
                            <q-icon name="drafts" />
                        </q-item-section>

                        <q-item-section>Drafts</q-item-section>
                    </q-item>
                </q-list>
            </q-scroll-area>
        </q-drawer>

        <q-page-container>
            <q-page padding>
                <router-view />
            </q-page>
        </q-page-container>

        <q-footer>
            <q-toolbar class="glossy">
                <q-toolbar-title>Footer</q-toolbar-title>
            </q-toolbar>
        </q-footer>
    </q-layout>
</template>

<script setup>
import { ref } from "vue";
import { useQuasar } from 'quasar'

const leftDrawerOpen = ref(false)

const $q = useQuasar()

</script>
